<template>
    <div class="watch-stock-list">
        <div class="header">
            <div class="title">Watchlist</div>
            <div class="link" @click="jumpToWatchList">See All ></div>
        </div>
        <div class="stock-box hide-scrollbar">
            <div class="stock-list">
                <div class="stock-item" v-for="item in watch_list" :key="item.id" @click="jumpToTabbarTrade(item)">
                    <div class="symbol">{{ item.symbol }}</div>
                    <div class="price-box">
                        <div class="price">{{ item.price }}</div>
                        <div class="change" :style="`color: ${ parseFloat(item.change) >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ item.change }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, computed } from 'vue';
import { watch_list, openStockDetail, jumpToTabbarTrade } from '@/service/market.js';
import { is_login } from '@/service/auth.js';
import { holding_list, assetService } from '@/service/asset.js';
import { active_stock_close_item, openStockCloseSelector, trade_type } from '@/service/trading.js';
import { routerTo } from '@/utils/jump';
import { active_nav_item, link_list } from '@/service/tabbar.js';

function jumpToWatchList() {
    routerTo('/tabbar/markets?page=watchlist');
    let idx = 0;
    for (let i = 0; i < link_list.length; i++) {
        if (link_list[i].link === '/tabbar/markets') {
            idx = i;
            break;
        }
    }
    active_nav_item.value = link_list[idx];
}

// function search_symbol(symbol) {
//     for (let i = 0; i < stock_list.value.length; i++) {
//         if (stock_list.value[i].shortName === symbol) {
//             return stock_list.value[i];
//         }
//     }
// }

// // TODO: 临时写一个计算属性用于计算盈亏 后续应该优化到 O(n) 的复杂度
// const change_list = computed(() => {
//     return holding_list.value.map(item => {
//         let list = stock_list.value;
//         for (let i = 0; i < list.length; i++) {
//             if (list[i].symbol === item.marketSymbol) {
//                 let a = (item.price - parseFloat(list[i].price.slice(1))) * item.shares;
//                 // console.log('1111111111111', item.price, list[i].price, item.shares, a);
//                 return a;
//             }
//         }
//     });
// });

// // 打开平仓窗口
// function openStockCloseModel(item, trade_type) {
//     Object.assign(active_stock_close_item.value, item);
//     console.log('openStockCloseModel', item, active_stock_close_item);
//     openStockCloseSelector(trade_type);
// }

// onMounted(() => {
//     // 获取持仓记录接口
//     assetService.getStockOrderList();
// });
</script>

<style scoped lang="less">
.watch-stock-list {
    display: flex;
    flex-direction: column;
    gap: 1vw;

    .header {
        width: 100%;
        height: 8vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
    
        .title {
            font-size: 4vw;
            font-weight: 700;
        }
    
        .link {
            font-size: 3vw;
            color: var(--active-color);
        }
    }

    .stock-box {
        box-sizing: border-box;
        width: 100%;
        max-height: 60vw;

        .stock-list {
            display: flex;
            align-items: center;
            gap: 2vw;

            // .stock-item {
            //     box-sizing: border-box;
            //     width: 100%;
            //     height: 15vw;
            //     padding: 2vw;
            //     display: flex;
            //     justify-content: space-between;
            //     align-items: center;
            //     border-bottom: 0.1vw solid var(--border-color);

            //     &:last-child {
            //         border-bottom: none;
            //     }

            //     .left-box {
            //         display: flex;
            //         flex-direction: column;
            //         gap: 1vw;

            //         .top, .bottom {
            //             display: flex;
            //             align-items: center;
            //             gap: 2vw;
            //         }

            //         .top {
            //             .symbol {
            //                 font-size: 3.5vw;
            //                 font-weight: 600;
            //                 color: var(--text-color);
            //             }

            //             .name {
            //                 font-size: 2.8vw;
            //                 color: var(--text-light-color);
            //             }
            //         }

            //         .bottom {
            //             .price {
            //                 font-size: 3.5vw;
            //                 font-weight: 600;
            //                 color: var(--text-color);
            //             }

            //             .change {
            //                 font-size: 3vw;
            //             }
            //         }
            //     }

            //     .right-box {
            //         display: flex;
            //         gap: 2vw;

            //         .btn {
            //             color: #fff;
            //             font-size: 3vw;
            //             padding: 1vw 2vw;
            //             border-radius: 1vw;
            //         }
            //     }
            // }

            .stock-item {
                box-sizing: border-box;
                flex: 1;
                padding: 3vw;
                display: flex;
                flex-direction: column;
                gap: 2vw;
                border-radius: 2vw;
                background-color: #fff;
                box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.1);

                .symbol {
                    font-size: 4.5vw;
                    font-weight: 500;
                    color: var(--text-color);
                }

                .price-box {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .price {
                        font-size: 3.5vw;
                        font-weight: 500;
                        color: var(--text-color);
                    }

                    .change {
                        font-size: 3.3vw;
                    }
                }
            }
        }
    }
}
</style>